<!DOCTYPE html>
<html lang="zh-CH">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐乐心灵氧吧</title>

    <!-- 引用favicon图标 -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <!-- 引用基本样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引用页面公用样式 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引用本页面的样式 -->
    <link rel="stylesheet" href="css/register.css">
    <!-- 引用阿里的图标库 -->
    <link rel="stylesheet" href="fonts/iconfont.css">
    <!-- 右侧固定导航栏的页面跟随 -->
    <script src='js/fixed.js'></script>
</head>

<body>
    <!-- 最顶部模块 -->
    <section class="top">
        <div class="w">
            <p class="fl">您好，欢迎来到乐乐心灵氧吧！</p>
            <ul class="fr">
                <li><a href="#">收藏</a></li>
                <li><a href="#">微信公众号</a></li>
                <li>
                    <a href="https://map.baidu.com/@13739823.969902188,5121024.355707711,17.56z" target="_blank">
                    一键导航
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <!-- 头部模块 -->
    <header class="header w">
        <div class="fl logo">
            <h1><a href="index.html" title="乐乐心灵氧吧">乐乐心灵氧吧</a></h1>
        </div>
        <div class="fr hright">
            <h4 class="iconfont iconkefu"> 咨询热线</h4>
            <i class="iconfont iconEnd-Call"> </i>
            <span>1234567890</span>
        </div>
    </header>
    <!-- 菜单导航 -->
    <nav class="nav">
        <div class="w">
            <ul>
                <li><a href="index.html">网站首页</a></li>
                <li><a href="test.html">心理测评</a></li>
                <li><a href="ency.html">心理百科</a></li>
                <li><a href="happy.html">开心一刻</a></li>
                <li><a href="game.html">减压游戏</a></li>
                <li class="page1"><a href="register.html" class="page2">用户中心</a></li>
                <li><a href="relation.html">联系我们</a></li>
            </ul>
        </div>
    </nav>

    <!--横幅 -->
    <div class="banner">
        <img src="images/back.jpg" alt="没有找到图片">
    </div>

    <!-- 主体部分 -->
    <div class="main w clearfix">
        <!-- 快捷导航部分 -->
        <div class="flnav fl">

            <div class="navigation fl iconfont">
                <h2 class="navtitle">快捷导航</h2>
                <ul>
                    <li><a href="#"><i class="iconceshi"></i><p>心理测评</p></a></li>
                    <li><a href="#"><i class="iconjiankangbaike"></i><p>心理百科</p></a></li>
                    <li><a href="#"><i class="icondiantai"></i><p>心灵电台</p></a></li>
                    <li><a href="#"><i class="iconyouxi"></i><p>减压游戏</p></a></li>
                    <li><a href="#"><i class="iconkaixin2"></i><p>开心一刻</p></a></li>
                    <li><a href="#"><i class="iconzhinanzhen"></i><p>网站指南</p></a></li>
                    <li><a href="#"><i class="iconfuwu-active"></i><p>用户服务</p></a></li>
                    <li><a href="#"><i class="iconpingjia"></i><p>评价建议</p></a></li>
                    <li><a href="#"><i class="iconluxian"></i><p>乘车路线</p></a></li>
                </ul>
            </div>
            <div class="music fl iconfont">
                <h2 class="iconyinyue"> 心灵电台</h2>
                <h3>
                    <audio src="images/music.mp3" controls="controls" loop="loop">您的浏览器不支持 audio 标签。</audio>
                </h3>
            </div>
            <div class="recommend fl iconfont">
                <h2 class="navtitle">为您推荐</h2>
                <ul>
                    <img src="images/picture/12.jpg" alt="">
                    <li><a href="#">“短暂失忆”别担心，先看看科学家的最新解释我们的大部分“失忆”并不是因为神经连接断开或年龄相关的衰退，而是一种重要的功能，是生存的必需品。</a></li>
                    <li><a href="#">近期壹正在内测「心探教练」，它和咨询服务不同，属于资深「心理学创作者、从业者」，「分享知识和经验」的服务。</a></li>
                    <li><a href="#">古代对于梦的解释，往往倾向于指出梦的预知。从科学来看，这毫无根据。事实上人在梦中思维并没有清醒时理智，更不必提预知能力了。但我们也发现梦境在一定程度上确实与未来相关。如何正确认知人的梦？</a></li>
                    <li><a href="#">头部外伤或者中风也可导致言语流中的重复、停顿或拖长。一些特定类型药物（例如抗抑郁药物、抗组胺药物和镇静剂）造成口吃的报告也存在，但是比较罕见。</a></li>
                </ul>
            </div>

        </div>
        <div class="register fr">
            <div class="title">
                <h2 class="fr">注册新用户</h2>
                <div class="login fl">已有账号，去<a href="#">登陆</a></div>
            </div>
            <h1>开始注册</h1>
            <div class="reg_form">
                <form action="">
                    <ul>
                        <li>
                            <label for="">姓&emsp;&emsp;名：</label> <input type="text" class="inp">
                        </li>
                        <li>
                            <label for="">昵&emsp;&emsp;称：</label> <input type="text" class="inp">
                        </li>
                        <li>
                            <label for="">电&emsp;&emsp;话：</label> <input type="text" class="inp">
                            <span class="error"> <i class="iconfont iconshibai"></i> 号码格式不正确，请重新输入 </span>
                        </li>
                        <li>
                            <label for="">短信验证：</label> <input type="text" class="inp">
                            <span class="success"> <i class="iconfont iconchenggong"></i> 短信验证码输入正确 </span>
                        </li>
                        <li>
                            <label for="">登录密码：</label> <input type="password" class="inp">
                            <span class="error"> <i class="iconfont iconshibai"></i> 密码格式不正确，请重新输入 </span>
                        </li>
                        <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li>
                        <li>
                            <label for="">确认密码：</label> <input type="password" class="inp">
                        </li>
                        <li class="agree"><input type="checkbox" name="" id=""> 同意协议并注册 <a href="#">《用户协议》</a>
                        </li>
                        <li>
                            <input type="submit" value="开始提交" class="btn">
                            <input type="reset" value="重新填写" class="btn">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>

    <!-- 底部页面 -->
    <footer>
        <div class="w">
            <div class="ftop">
                <!-- 左侧logo -->
                <div class="flogo fl">
                    <h1>logo</h1>
                    <h2>title</h2>
                </div>
                <!-- 中间列表 -->
                <div class="fcenter fl">
                    <dl>
                        <dt>网站指南</dt>
                        <dd><a href="#">心理测试</a></dd>
                        <dd><a href="#">心理咨询</a></dd>
                        <dd><a href="#">心灵电台</a></dd>
                        <dd><a href="#">减压游戏</a></dd>
                        <dd><a href="#">开心一刻</a></dd>
                    </dl>
                    <dl>
                        <dt>友情链接</dt>
                        <dd><a href="http://www.baidu.com" target="_banlk">百度</a></dd>
                        <dd><a href="https://www.xinli001.com/" target="_banlk">壹心理</a></dd>
                        <dd><a href="https://www.jiandanxinli.com/" target="_banlk">简单心理</a></dd>
                        <dd><a href="https://activitypc.ydl.com/" target="_banlk">壹点灵</a></dd>
                    </dl>
                    <dl>
                        <dt>线下咨询</dt>
                        <dd><a href="#">路线导航</a></dd>
                        <dd><a href="#">微信公众号</a></dd>
                    </dl>
                    <dl>
                        <dt>联系我们</dt>
                        <dd><a href="#">座机电话</a></dd>
                        <dd><a href="#">手机号码</a></dd>
                        <dd><a href="#">在线联系</a></dd>
                        <dd><a href="#">微信号</a></dd>
                    </dl>
                </div>
                <!-- 右侧电话和二维码 -->
                <div class="fright fr">
                    <div class="phone">
                        <i class="iconfont iconphone-call fl"></i>
                        <h5>联系电话(24小时在线）</h5>
                        <h4>1234567890</h4>
                    </div>
                    <div class="code">
                        <h5></h5>
                        <span class="iconfont iconicon-test5">扫一扫进入公众号</span>
                    </div>
                </div>
            </div>
            <!-- 底部版权所有 -->
            <div class="fbottom">
                &copy;版权所有：沈阳工程学院信息学院 &emsp;&copy;版权所有：创新创业教育中心 <br>手机号：1234567890 QQ号：123456789
            </div>
        </div>
    </footer>

    <!-- 右侧导航栏 -->
    <article class="article">
        <ul>
            <li>
                <a href="#">
                    <i class="iconfont iconweixin"></i>
                    <h5>微信咨询</h5>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont iconphone-call"></i>
                    <h5>电话咨询</h5>
                </a>
            </li>
            <li>
                <a href="https://map.baidu.com/@13739823.969902188,5121024.355707711,17.56z" target="_blank">
                    <i class="iconfont iconpointer2"></i>
                    <h5>路线导航</h5>
                </a>
            </li>
            <li>
                <a href="javascript:;" class="goBack">
                    <i class="iconfont iconicon-test4"></i>
                    <h5>回到顶部</h5>
                </a>
            </li>
        </ul>
    </article>

</body>

</html>